<template>
  <view class="step-bar">
    <progress :percent="percent" show-info stroke-width="6" />
  </view>
</template>

<script>
  export default {
    props:{
      percent:{
        type:[String,Number],
        require:true
      }
    },
    name:"step-bar",
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="less" scoped>
  .step-bar{
    ::v-deep.uni-progress-bar{
      border-radius: 30rpx!important;
      .uni-progress-inner-bar{
        background: linear-gradient(90deg,#ffb412,#ff4800)!important;
        border-radius: 30rpx;
      }
    }
    ::v-deep.uni-progress-info{
      color: #ff4800!important;
      font-size: 24rpx!important;
      margin-left: 10rpx!important;
    }
  }
</style>